<template>

    <view>
        <view class="inv-h-w">
            <view :class="['inv-h',Inv==1?'inv-h-se':'','inv-tab']" @click="changeTab(1)">
                <text class="">未使用</text>
            </view>
            <view :class="['inv-h',Inv==2?'inv-h-se':'','inv-tab']" @click="changeTab(2)">
                <text class="">已使用</text>
            </view>
            <view :class="['inv-h',Inv==3?'inv-h-se':'','inv-tab']" @click="changeTab(3)">
                <text class="">已过期</text>
            </view>
        </view>
		
        <view class="tab-view tab-view-0" v-show="Inv == 1">
            <!-- 				<view class="exchange-container">
					<input class="uni-input" placeholder="请输入兑换码" v-model="exchangeCode"/>
					<view :class="[exchangeCode ? 'orange' : '']" @click="exchange">兑换</view>
				</view> -->
            <view class="list">
                <view class="red-packet" v-for="(item, index) in validPackets" :key="index">
                    <view class="red-packet-top-left">
                        <view class="money">
                            <text>￥</text>
                            <text>{{item.amount}}</text>
                        </view>
                        <view>满{{item.cill}}元可用</view>
                    </view>
                    <view class="red-packet-top-right">
                        <view class="">{{item.redPackName}}</view>
                        <view class="date">
                            <text>{{item.createTime}}至{{item.expireTime}}</text>
                        </view>
                    </view>
                    <view class="red-packet-bottom" @click="changeEllipsis(item)">
                        <view :class="[item.ellipsis ? 'ellipsis' : '']">仅限设备{{item.deviceIdStr}}使用</view>
                        <image src="/static/icons/down.png"></image>
                        <!-- <view class=""></view> -->
                    </view>
                </view>
            </view>
        </view>
        <view class="tab-view tab-view-expire" v-show="Inv == 2">
            <view class="list">
                <view class="red-packet" v-for="(item, index) in hasUsedPackets" :key="index">
                    <view class="red-packet-top-left">
                        <view class="money">
                            <text>￥</text>
                            <text>{{item.amount}}</text>
                        </view>
                        <view>满{{item.cill}}元可用</view>
                    </view>
                    <view class="red-packet-top-right">
                        <view class="">{{item.redPackName}}</view>
                        <view class="date">
                            <text>已使用</text>
                        </view>
                    </view>
                    <view class="red-packet-bottom">
                        <view :class="[item.ellipsis ? 'ellipsis' : '']">仅限设备{{item.deviceIdStr}}使用</view>
                        <image src="/static/icons/down.png"></image>
                    </view>
                </view>
            </view>
        </view>
        <view class="tab-view tab-view-expire" v-show="Inv == 3">
            <view class="list">
                <view class="red-packet" v-for="(item,index) in expiredPackets" :key="index">
                    <view class="red-packet-top-left">
                        <view class="money">
                            <text>￥</text>
                            <text>{{item.amount}}</text>
                        </view>
                        <view>满{{item.cill}}元可用</view>
                    </view>
                    <view class="red-packet-top-right">
                        <view class="">{{item.redPackName}}</view>
                        <view class="date">
                            <text>已过期</text>
                        </view>
                    </view>
                    <view class="red-packet-bottom">
                        <view :class="[item.ellipsis ? 'ellipsis' : '']">仅限设备{{item.deviceIdStr}}使用</view>
                        <image src="/static/icons/down.png"></image>
                        <!-- <view class=""></view> -->
                    </view>
                </view>
            </view>
        </view>
		<view class="bottomBox" >
			<view class="myCoupon2" @click="JumpActive">
				<p>领券中心</p>
			</view>
		</view>
    </view>
</template>
<script>
    import redPacket from "./redPacket.js"
    export default redPacket;
</script>

<style lang="scss" scoped>
	.bottomBox {
		position: fixed;
		bottom: 0;
		width: 100vw;
		height: 24vw;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: space-around;
	
		.myCoupon {
			padding: 0 40rpx;
			height: 80rpx;
			border-radius: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #004ea0;
			color: white;
		}
		.myCoupon2 {
			padding: 0 40rpx;
			height: 70rpx;
			width: 500rpx;
			border-radius: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #004ea0;
			color: white;
		}
	
		.dingyue {
			padding: 0 40rpx;
			height: 80rpx;
			border-radius: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border: #004ea0 1px solid;
			color: #004ea0;
		}
	
		// justify-content:center;
		// align-items: space-around;
	}
	.ChooseList{
		height: 5vh;
		width: 90%;
		margin-top: 30rpx;
		display: flex;
		
		.tag{
			width: 200rpx;
			height: 60rpx;
			border-radius: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #c7c7c7;
			margin-left: 30rpx;
			font-size: 30rpx;
			color: #666;
		}
	}
    .inv-h-w{background-color: #FFFFFF;height: 100upx;display: flex;border-bottom: 2rpx solid #e1e1e1;}
    .inv-h{font-size: 28rpx;flex: 1;text-align: center;color: #000;height: 100upx;line-height: 100upx;display: flex;justify-content: center;}
    .inv-h-se > text{color: #e82050;border-bottom: 4rpx solid #e82050;}
    .exchange-container{
    	width: 100%;
    	height: 100rpx;
    	background-color: #f2f2f2;
    	padding: 20rpx;
    	box-sizing: border-box;
    	display: flex;
    	justify-content: space-between;
    }
    .exchange-container input{
    	padding-left: 40rpx;
    	border-radius: 50rpx;
    	height: 100%;
    	width: 70%;
    	background-color: #fff;
    	border: 2rpx solid #D9D9D9;
    }
    .exchange-container view{
    	height: 100%;
    	width: 20%;
    	background-color: #D9D9D9;
    	border-radius: 50rpx;
    	color: #fff;
    	display: flex;
    	align-items: center;
    	justify-content: center;
    }
    .exchange-container .orange{
    	background-color: #FFDA00;
    }
    .list{
    	padding: 22rpx;
    	padding-top: 0;
    }
    .red-packet{
    	display: flex;
    	flex-wrap: wrap;
    	width: 100%;
    	background-color: #faebeb;
    	box-sizing: border-box;
    	border: 2rpx solid #eac1c1;
    	border-radius: 10rpx;
    	font-size: 26rpx;
    	color: #444;
    	margin-top: 30rpx;
    }
    .red-packet .red-packet-top-left{
    	width: 30%;
    	height: 150rpx;
    	border-right: 2rpx dashed #eac1c1;
    	box-sizing: border-box;
    	display: flex;
    	flex-wrap: wrap;
    	flex-direction: column;
    	justify-content: center;
    	text-align: center;
    }
    .red-packet .money text:nth-child(2){font-size: 60rpx;font-weight: bold;}
    .red-packet .red-packet-top-right{
    	width: 70%;
    	height: 150rpx;
    	box-sizing: border-box;
    	padding-left: 40rpx;
    }
    .red-packet .red-packet-top-right view:first-child{
    	margin-top: 44rpx;
    }
    .red-packet .red-packet-top-right .date{
    	color: #b0adad;
    	margin-top: 20rpx;
    }
    .red-packet .red-packet-bottom{
    	width: 100%;
    	/* height: 58rpx; */
    	border-top: 2rpx dashed #eac1c1;
    	box-sizing: border-box;
    	display: flex;
    	justify-content: space-between;
    	align-items: center;
    	padding:30rpx 40rpx;
    }
    .red-packet .red-packet-bottom view{
    	width: 90%;
    	word-break: break-all;
    }
    .red-packet .red-packet-bottom .ellipsis{
    	white-space: nowrap;
    	text-overflow: ellipsis;
    	overflow: hidden;
    }
    .red-packet .red-packet-bottom image{
    	height: 24rpx;
    	width: 24rpx;
    }
    .color-red{
    	color: #ea3e66;
    }
    .date .color-red{margin-left: 20rpx;}
    
    
    
    .tab-view-expire .list .red-packet{
    	background-color: #F1F1F1;
    	border-color: #c1c1c1;
    }
    .tab-view-expire .list .red-packet .red-packet-bottom{
    	border-color: #c1c1c1;
    }
    .tab-view-expire .list .red-packet .red-packet-top-left{
    	border-color: #c1c1c1;
    }
    .tab-view-expire .list .red-packet .red-packet-top-right{
    	border-color: #c1c1c1;
    }
    /* 
    					<view class="red-packet">
    						<view class="red-packet-top-left"></view>
    						<view class="red-packet-top-right"></view>
    						<view class="red-packet-bottom"></view> */
</style>